<template>
  <div
    title="删除线"
    class="tlbr-btn"
    :class="{ active: strikeType }"
    @click="changeStrike"
  >
    <div class="tlbr-btn__icon">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M11.9999 4.40002C10.592 4.40002 9.54963 4.91508 8.86496 5.68146C8.19329 6.43328 7.8999 7.38831 7.8999 8.23079C7.8999 9.23624 8.35277 10.4095 9.28322 11.3H5.6C5.26863 11.3 5 11.5687 5 11.9C5 12.2314 5.26863 12.5 5.6 12.5H11.4781C11.6128 12.5347 11.7514 12.565 11.8939 12.5906C13.3326 12.8488 14.1941 13.2803 14.6967 13.7924C15.183 14.288 15.3999 14.9277 15.3999 15.7693C15.3999 16.4933 15.0235 17.1378 14.387 17.6212C13.7462 18.1079 12.875 18.4 11.9999 18.4C11.1542 18.4 10.2843 18.0546 9.6269 17.5236C8.95962 16.9847 8.5999 16.332 8.5999 15.7693C8.5999 15.4379 8.33127 15.1693 7.9999 15.1693C7.66853 15.1693 7.3999 15.4379 7.3999 15.7693C7.3999 16.8218 8.04019 17.7846 8.8729 18.4572C9.71554 19.1378 10.8456 19.6 11.9999 19.6C13.1248 19.6 14.2536 19.2293 15.1128 18.5769C15.9763 17.9211 16.5999 16.9503 16.5999 15.7693C16.5999 14.7058 16.3168 13.7301 15.5531 12.9519C15.3938 12.7896 15.2167 12.6391 15.0215 12.5H18.4C18.7314 12.5 19 12.2314 19 11.9C19 11.5687 18.7314 11.3 18.4 11.3H11.6404C9.87316 10.7805 9.0999 9.29284 9.0999 8.23079C9.0999 7.64872 9.30652 6.98837 9.75985 6.48094C10.2002 5.98807 10.9078 5.60002 11.9999 5.60002C13.4853 5.60002 14.3189 6.4939 14.6876 7.54356C14.7974 7.8562 15.1399 8.02062 15.4526 7.91079C15.7652 7.80096 15.9296 7.45848 15.8198 7.14584C15.3256 5.73915 14.1144 4.40002 11.9999 4.40002Z"
          fill="currentColor"
        ></path>
      </svg>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, inject, computed, shallowRef } from 'vue'
import Quill from 'quill'
const QuillEditor = inject('QuillEditor', shallowRef<Quill>())
const formatMap = inject('formatMap', ref<Record<string, any>>({}))
const getSelectionFormat = inject('getSelectionFormat', () => {})
const strikeType = computed(() => {
  return formatMap.value.strike
})
const changeStrike = () => {
  QuillEditor.value!.focus()
  QuillEditor.value!.format('strike', !strikeType.value)
  getSelectionFormat()
}
</script>
<style lang="scss" scoped></style>
